<template>
  <div>
    <div class="opcard">
      <div class="opc_top">
        <div>
          <span>西安大都会店</span>
          <span>下单时间: 2022-02-14 14:53:43</span>
        </div>
        <router-link style="font-size:4vw" to="/orderdetail"
          >已完成<van-icon name="arrow"
        /></router-link>
      </div>
      <div class="opc_bottom">
        <div class="img">
          <img src="/downloadFile/59.jpeg" alt="" />
          <div>
            <p>共<span>1</span>件</p>
            <p>实付：￥20.00</p>
          </div>
        </div>
        <div class="btn">
          <van-button size="mini">开发票</van-button>
          <van-button size="mini" color="#a7d500">去评价</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.opcard {
  width: 94%;
  margin: 3vw auto;
  box-sizing: border-box;
  padding: 4vw;
  background-color: white;
  border-radius: 2vw;
  /* border: 1px solid #bec2c5; */
}
.opcard .opc_top {
  display: flex;
  padding-bottom: 4vw;
  justify-content: space-between;
  border-bottom: 1px dashed #bec2c5;
}
.opc_top span {
  display: block;
}
.opc_top span:nth-child(1) {
  color: black;
  font-weight: bold;
}
.opc_top span:nth-child(2) {
  color: #bec2c5;
  font-size: 1vw;
}
.opc_top a {
  color: #bec2c5;
}
.opc_bottom .img {
  padding: 4vw 0;
  display: flex;
  justify-content: space-between;
}
.opc_bottom .img img {
  width: 12vw;
  display: block;
}
.opc_bottom p {
  margin: 0;
  padding: 0;
  text-align: end;
}
.opc_bottom p {
  font-size: 4vw;
}
.opc_bottom p:nth-child(1) {
  color: #bec2c5;
}
.opc_bottom .btn {
  display: flex;
  justify-content: flex-end;
}
::v-deep .opcard .van-button {
  width: 20vw !important;
  color: #666 !important;
}
</style>